import { useCatStore } from "../stores/catStore";

export const CatBox = () => {
  // 非使用全部状态时，推荐使用selector 逐个状态获取
  // const bigCats = useCatStore(state => state.cats.bigCats)
  // const smallCats = useCatStore(state => state.cats.smallCats)
  // const increaseBigCats = useCatStore(state => state.increaseBigCats)
  // const increaseSmallCats = useCatStore(state => state.increaseSmallCats)
  // const summary = useCatStore(state => state.summary)

  // 使用全部状态时，才用useCatStore()
  const {
    cats: { bigCats, smallCats },
    increaseBigCats,
    increaseSmallCats,
    summary,
  } = useCatStore();

  return (
    <div className="box">
      <h1>Cat Box</h1>
      <p>big cats: {bigCats}</p>
      <p>small cats: {smallCats}</p>
      <p>{summary()}</p>
      <p>测试重渲染：{Math.random()}</p>
      <div>
        <button onClick={increaseBigCats}>add big cat</button>
        <button onClick={increaseSmallCats}>add small cat</button>
      </div>
    </div>
  );
};
